class BuildingList extends React.Component {
    constructor(props) {
        super(props);
        this.buildingList = [];
        this.state = {
            list: ''
        }
    }

    layuiInitComplete() {
        this.form = layui.form();
        this.form.on('checkbox(selectBuilding)', function (data) {
            let commCode = data.value, j = -1;
            for (let i in this.buildingList) {
                if (this.buildingList[i] === commCode) {
                    j = i;
                    break;
                }
            }

            if (data.elem.checked === true) {
                if (j === -1) {
                    this.buildingList.push(commCode);
                }
            } else {
                if (j !== -1) {
                    this.buildingList.splice(j, 1);
                }
            }
        }.bind(this));
    }

    queryList() {
        this.buildingList = [];
        let param = {};
        param.pageSize = this.props.pageSize ? this.props.pageSize : 5;
        param.page = 1;
        this.updateList(param);
    }

    updateList(param) {
        postJson('/comm/findCommListPage.x', $.param(param), function (data) {
            this.setState({
                list: data.list
            }, function () {
                this.form.render();
            });
            if (param.page === 1) {
                layui.laypage({
                    cont: 'buildingSelectListPage'
                    , pages: Math.ceil(data.size / param.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            param.page = row.curr;
                            this.updateList(param);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    selectView(commCode) {
        if (this.buildingList.length > 0) {
            for (let i in this.buildingList) {
                if (this.buildingList[i] === commCode) {
                    return (<input type="checkbox" name="selectBuilding" data-filter="selectBuilding"
                                   checked={true} value={commCode}/>)
                }
            }
        }
        return (<input type="checkbox" name="selectBuilding" data-filter="selectBuilding"
                       checked={false} value={commCode}/>);
    }

    selectCallback() {
        this.props.selectCallback(this.buildingList);
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                    <td>{array.comm_code}</td>
                    <td>{array.comm_name}</td>
                    <td>
                        {this.selectView(array.comm_code)}
                    </td>
                </tr>)
            }.bind(this))
        }
    }

    render() {
        return <div style={{'padding-bottom': '10px'}}>
            <table className="layui-table">
                <colgroup>
                    <col/>
                    <col/>
                    <col width="90"/>
                </colgroup>
                <thead>
                <tr>
                    <th>小区编号</th>
                    <th>小区名</th>
                    <th>选择</th>
                </tr>
                </thead>

                <tbody>
                {this.tbody()}
                </tbody>
            </table>
            {this.props.selectCallback ?
                <button type="button" onClick={() => this.props.selectCallback(this.buildingList)}
                        className="layui-btn layui-btn-normal">
                    {this.props.btnText}
                </button> : ''
            }
            < div style={{'float': 'right', 'margin-right': '1px'}} id="buildingSelectListPage"/>
        </div>
    }
}